<template>
  <div class="sumbit-form">
    <el-form :model="value" :rules="rules" ref="ruleForm" :inline="inline" :label-width="labelWidth" :size="size">
      <slot name="formItem" />
      <template v-for="(i, k) in formItemList">
        <span :key="k">
          <template v-if="
                    ['text', 'textarea', 'number', 'email'].indexOf(i.type) !== -1
                  ">
            <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
              <el-input :type="i.type" v-model="value[i.name]" :style="'width:'+i.width" :placeholder="i.placeholder || '请输入'"></el-input>
            </el-form-item>
          </template>
          <template v-if="i.type == 'br'">
            <br>
          </template>
          <template v-if="i.type === 'select'">
            <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
              <el-select :multiple="i.multiple" :filterable="i.filterable" v-model="value[i.name]" :placeholder="i.placeholder || '请选择'" :style="'width:'+i.width">
                <el-option v-for="(j, k) in i.optList" :key="k" :label="j.label" :value="j.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="i.type == 'daterange'">
            <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
              <el-date-picker :picker-options="i.pickerOptions" :style="'width:'+i.width" v-model="value[i.name]" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </template>
          <template v-if="i.type == 'date'">
            <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
              <el-date-picker :picker-options="i.pickerOptions" :style="'width:'+i.width" v-model="value[i.name]" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </template>
          <template v-if="i.type == 'switch'">
            <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
              <el-switch v-model="value[i.name]"></el-switch>
            </el-form-item>
          </template>
          <template v-if="i.type == 'radio'">
            <el-form-item :label="i.label">
              <el-radio-group v-model="value[i.name]">
                <el-radio v-for="(j, k) in i.optList" :label="j" :key="k"></el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
          <template v-if="i.type === 'Checkbox'">
            <el-form-item :label="i.label">
              <el-checkbox-group v-model="value[i.name]">
                <el-checkbox v-for="ch in i.checkboxs" :label="ch.value" :key="ch.value">{{ ch.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

          </template>
          <template v-if="i.type === 'cascader'">
            <el-form-item :label="i.label">
              <el-cascader :filterable="i.filterable" :collapse-tags="i.collapse" v-model="value[i.name]" :options="i.options" :props="i.props" :style="'width:'+i.width"></el-cascader>
            </el-form-item>
          </template>
          <template v-if="i.type === 'btns'">
            <el-form-item>
              <el-button v-for="(item, index) in i.btns" :key="index" :size="size" :type="item.styles" @click.stop.prevent="item.handleClick">{{ item.name }}
              </el-button>
            </el-form-item>
          </template>

        </span>
      </template> 
    </el-form>
  </div>
</template>
  </div>  
 <script>
export default {
  props: {
    formItemList: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: Object,
      default: () => { }
    },
    rules: {
      type: Object,
      default: () => { 
        return {}
      }
    },
    labelWidth: {
      type: String,
      default: () => {
        return '100px'
      }
    },
    size: {
      type: String,
      default: () => {
        return 'mini'
      }
    },
    inline: {
      type: Boolean,
      default: () => {
        return true
      }
    },
  },
  data() {
    return {
      isSearchLock: true
    };
  },
  created() { },
  methods: {
    //子组件校验，传递到父组件
    validateForm() {
      let flag = null;
      if (this.isSearchLock) {
        this.$refs["ruleForm"].validate(valid => {
          let vm = this;
          if (valid) {
            flag = true;
            vm.isSearchLock = flag;
          } else {
            flag = false;
            vm.isSearchLock = flag;
            this.$message.error("保存信息不完整，请继续填写完整");
            setTimeout(function () {
              vm.isSearchLock = true;
            }, 2000);
          }
        });
        return flag;
      }
    },
    resetFields() {
      this.$refs["ruleForm"].resetFields();
    }
  },
  mounted() { }
};
 </script> 